<template>
  <div class="page-index detail">
    <div class="header">
        <h1>订单详情</h1>
        <span class="back" @click="back"></span>
    </div>
    <b-scroll ref="bscroll" :nomore="false">
        <div class="content" slot="scroll">
            <h1 class="biaoti bg-white">{{orderInfo.shop_name}}</h1>
            <ul class="bg-white border-b-line">
                <li v-for="item in goodslist">
                    <div class="flex-wrap">
                        <div class="flex-item">
                            <h1 class="font-small font-color-normal">{{item.goods_name}}</h1>
                        </div>
                        <div class="flex-item center">
                            <h1 class="font-normal font-color-shallow">{{item.total_num}}</h1>
                        </div>
                        <div class="flex-item right">
                            <h1 class="font-small font-color-shallow">￥{{item.sell_price}}</h1>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="flex-wrap bg-white border-b-line">
                <div class="flex-item left">
                    <h1 class="font-small font-color-normal">备注信息</h1>
                </div>
                <div class="flex-item right">
                    <h1 class="font-small font-color-shallow">{{orderInfo.description}}</h1>
                </div>
            </div>
            <div class="flex-wrap bg-white border-b-line">
                <div class="flex-item left">
                    <h1 class="font-small font-color-normal">联系方式</h1>
                </div>
                <div class="flex-item right">
                    <h1 class="font-small font-color-shallow" @click="call(shopInfo.contact_phone)">{{shopInfo.contact_phone}}</h1>
                </div>
            </div>
            <div class="flex-wrap bg-white">
                <div class="flex-item left">
                    <h1 class="font-small font-color-normal">取货地址</h1>
                </div>
                <div class="flex-item right">
                    <h1 class="font-small font-color-shallow">{{shopInfo.address}}</h1>
                </div>
            </div>
            <h1 class="biaoti bg-white margin-t-10">配送信息</h1>
            <div class="flex-wrap bg-white border-b-line">
                <div class="flex-item left">
                    <h1 class="font-small font-color-normal">联系人</h1>
                </div>
                <div class="flex-item right">
                    <h1 class="font-small font-color-shallow">{{orderInfo.receiver_name}}</h1>
                </div>
            </div>
            <div class="flex-wrap bg-white border-b-line">
                <div class="flex-item left">
                    <h1 class="font-small font-color-normal">联系方式</h1>
                </div>
                <div class="flex-item right">
                    <h1 class="font-small font-color-shallow" @click="call(orderInfo.receiver_phone)">{{orderInfo.receiver_phone}}</h1>
                </div>
            </div>
            <div class="flex-wrap bg-white">
                <div class="flex-item left">
                    <h1 class="font-small font-color-normal">收货地址</h1>
                </div>
                <div class="flex-item right">
                    <h1 class="font-small font-color-shallow">{{orderInfo.receiver_address}}</h1>
                </div>
            </div>
            <h1 class="biaoti bg-white margin-t-10 border-b-none">本单收入<span>￥{{orderInfo.deliver_fee}}</span></h1>
            <h1 class="biaoti bg-white margin-t-10">订单信息</h1>
            <div class="flex-wrap bg-white border-b-line">
                <div class="flex-item left">
                    <h1 class="font-small font-color-normal">订单编号</h1>
                </div>
                <div class="flex-item right">
                    <h1 class="font-small font-color-shallow">{{orderInfo.system_order_no}}</h1>
                </div>
            </div>
            <div class="flex-wrap bg-white border-b-line">
                <div class="flex-item left">
                    <h1 class="font-small font-color-normal">下单时间</h1>
                </div>
                <div class="flex-item right">
                    <h1 class="font-small font-color-shallow">{{orderInfo.order_time}}</h1>
                </div>
            </div>
            <!-- <div class="flex-wrap bg-white border-b-line">
                <div class="flex-item left">
                    <h1 class="font-small font-color-normal">取餐时间</h1>
                </div>
                <div class="flex-item right">
                    <h1 class="font-small font-color-shallow">{{orderInfo.get_good_time_str}}</h1>
                </div>
            </div>
            <div class="flex-wrap bg-white">
                <div class="flex-item left">
                    <h1 class="font-small font-color-normal">送达时间</h1>
                </div>
                <div class="flex-item right">
                    <h1 class="font-small font-color-shallow">{{orderInfo.finish_time_str}}</h1>
                </div>
            </div> -->
        </div>
    </b-scroll>
  </div>
</template>
<script>
import bScroll from 'components/common/bScroll.vue'
export default {
  data() {
      return {
        orderInfo : '',
        goodslist:'',
        shopInfo:'',
        title:'',
        orderid : ''
      }
    },
    mounted() {
      this.orderid = this.$route.params.id
      //if(this.goodsid != 0){
        this.title = "订单详情"
        let token = localStorage.getItem("access_token");
        let params = {"access_token": token,"order_no" : this.orderid}
        this.ajaxplugin("/Deliver/task_detail",params,(res) => {
          let result = res.result
          if(result == 'success'){
            this.orderInfo = res.data.order_info
            this.goodslist = res.data.good_list
            this.shopInfo = res.data.order_info.shop_info
            console.log(this.shopInfo)
            console.log(this.goodslist)
          }
        })
      //}
    },
    methods: {
      call(phone){
        window.location.href = 'tel:' + phone
      },
      back(){
          this.$router.push({ path: '/task/item/0' })
      }
      
    },
    components:{
        bScroll
    }
}
</script>

<style lang="stylus">
.detail
    .wrapper
        bottom 0px
        .content
            .biaoti
                span 
                    color #f00000
                    float right
            ul
                .flex-wrap
                    padding 0 15px
                    .flex-item
                        &.center
                            text-align center
                        &.right
                            text-align right
                        h1
                            line-height 35px
            .flex-wrap
                padding 0 10px
                .flex-item
                    &.left
                        flex 0 0 80px
                    &.right
                        text-align right
                        flex 1
                    h1
                        line-height 40px
  

</style>